<template>
<div id="app">
<!--  头部-->
  <Header notab="join"></Header>
  <div class="contentWeb">
    <!--  标题-->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="detailCrumb">
      <el-breadcrumb-item>招聘会</el-breadcrumb-item>
      <el-breadcrumb-item>{{name}}</el-breadcrumb-item>
      <el-breadcrumb-item>全部职位</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="companylistcontainer">
      <div class="head">
        <div class="head-item ">
          <div class="qanhuiqiye">招聘会内所有职位</div>
        </div>
        <div class="head-item">
         <div class="canhuisearch" style="margin-top: 15px;">
             <el-input placeholder="输入企业职位快速查询" v-model="search.position_name" class="input-with-select">

               <el-button @click="getlist(1)" slot="append" icon="el-icon-search"></el-button>
             </el-input>
          </div>
        </div>
      </div>
      <el-row :gutter="30">
        <el-col :span="12" v-for="(item, index) in list" :key="index" >
          <div class="grid-content bg-purple" @click="tojob(item.position_id)">
            <div class="jobcon">
               <div class="clear">
                 <div class="companyName">{{item.position_name}}</div>
                 <div class="prices"><b>{{item.wage_range}}</b><span></span></div>
               </div>
                  <div class="desc clear">
                    <span v-if="item.address">{{item.address}}</span>
                    <span v-if="item.experience">{{item.experience}}</span>
                    <span v-if="item.educational">{{item.educational}}</span>
                    <span>招{{item.zprs}}人</span>
                  </div>

              <div class="compname">{{item.companyName}}</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div style="text-align: center">
        <el-pagination background layout="prev, pager, next"
        :current-page="search.pageNum"
        @current-change="getlist"
        :page-count="totalPages"></el-pagination>
      </div>
    </div>

  </div>

  <Footer></Footer>
  </div>
</template>

<script type="text/babel">

import Footer from '@/components/footer'
import Header from '@/components/header'
import mt from '../../assets/img/mt.png'
import {
  getJFHotPosition,
  GetUrlParam
} from '../../assets/js/domains'

export default {
  name: 'JobList',
  data: function () {
    return {
      input3: '',
      mt: mt,
      total: 0,
      totalPages: 0,
      name: '',
      search: {
        pageNum: 1,
        pageSize: 20,
        jf_id: 0,
        position_name: ''
      },
      list: []
    }
  },
  components: {
    Footer,
    Header
  },
  created: function () {
    this.search.jf_id = GetUrlParam('id')
    this.name = decodeURI(GetUrlParam('name'))
    this.getlist()
  },
  methods: {
    getlist: function (e = 1) {
      this.search.pageNum = e
      const _this = this
      getJFHotPosition(this.search).then(function (res) {
        if (res.code == 200) {
          _this.list = res.data.content
          _this.total = res.data.totalElements
          _this.totalPages = res.data.totalPages
        }
      })
    },
    tojob: function (id) {
      window.location.href = 'jobDetail.html?id=' + id
    }
  }
}
</script>

<style lang="less">
  @import "../../assets/css/jobList";
</style>
